<template>
    <div>
        <p>
            <button @click="addFn">添加</button>
        </p>
        <!-- table表格数据 -->
        <table border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in userlist" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.tel }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.sex == 1 ? '男' : '女' }}</td>
                    <td>
                        <button :class="item.status == 0 ? 'redColor' : 'greenColor'">
                            {{ item.status == 0 ? '禁用' : '启用' }}
                        </button>
                    </td>
                    <td>
                        <button @click="editFn(item)">编辑</button>
                        <button @click="deluserFn(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!--模态框组件-->
        <Mymodal ref="mymodel" :isflag='isflag' v-show='isshowmodal'></Mymodal>
    </div>
</template>
<script>
// 引入辅助函数
import { mapState, mapMutations } from 'vuex'

import Mymodal from '../components/Mymodal.vue';
export default {
    data() {
        return {
            isshowmodal: false, // 是否显示模态量 默认false
            isflag: true  // true 表示 添加.   false 表示编辑
        }
    },
    computed: {
        ...mapState(['userlist'])
    },
    mounted() {
        console.log(this);
    },
    components: {
        Mymodal
    },
    methods: {
        ...mapMutations(['deluser']),
        // 点击添加按钮
        addFn() {
            //01: 显示模态框
            this.isshowmodal = true
            // 02: 修改状态 isflag
            this.isflag = true
        },
        // 点击编辑按钮
        editFn(item) {
            // 01: 显示模态框
            this.isshowmodal = true
            // 02: 修改状态 isflag
            this.isflag = false
            // 03: 数据的回填
            // console.log('item', item);
            // console.log(this.$refs.mymodel);
            // 因为当前item对象里面放了一层数据, 所以使用{...}浅拷贝, 就拷贝了第一层数据,
            // 在该处相当于深拷贝, 所以可以满足要求
            // Object.assign()
            // let newItem = { ...item } 
            let newItem = JSON.parse(JSON.stringify(item))
            this.$refs.mymodel.user = newItem
        },

        deluserFn(id) {
            this.deluser(id)
        }
    }
}
</script>
<style scoped>
.redColor {
    background-color: red;
}

.greenColor {
    background-color: greenyellow;
}

th,
td {
    padding: 20px;
}
</style>